<template>
  <view class="fixed top-0 left-0 w-full z-[999]">
    <view class="relative">
      <!-- :style="{ height: navbar * 2 + 'rpx', opacity: opacityVal }" -->
      <view class="" :style="bgOpacity">
        <view class="custom-nav w-full" :style="'height:' + navHeight + 'px;'">
          <view
            class="menu-button w-full flex items-center justify-between"
            :style="
              'top:' +
              customNavStyle.menuButtonTop +
              'px; height:' +
              customNavStyle.menuButtonHeight +
              'px;'
            "
          >
            <view class="flex items-center justify-between flex-1">
              <view class="left w-5" @click="handleBack"
                ><up-icon
                  v-if="back"
                  name="arrow-left"
                  size="22"
                  :color="opacityVal == 1 ? '#000000' : color"
                ></up-icon
              ></view>
              <view
                class="text-base flex-1 text-center"
                :style="{ color: opacityVal == 1 ? '#000000' : color }"
                >{{ title }}</view
              >
              <view class="right w-5"> </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { onPageScroll } from "@dcloudio/uni-app";
onPageScroll(({ scrollTop }) => {
  opacityVal.value = scrollTop > navbar ? 1 : (scrollTop * 0.01).toFixed(2) * 1;
});
const opacityVal = ref(0);

const props = defineProps({
  color: {
    type: String,
    default: "#000000",
  },
  back: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    required: true,
  },
});

// 获取小程序胶囊信息
const getCapsule = () => {
  // #ifdef MP
  let capsule = uni.getMenuButtonBoundingClientRect();
  if (!capsule) {
    capsule = {
      bottom: 56,
      height: 32,
      left: 278,
      right: 365,
      top: 24,
      width: 87,
    };
  }
  return capsule;
  // #endif

  // #ifndef MP
  return {
    bottom: 56,
    height: 32,
    left: 278,
    right: 365,
    top: 24,
    width: 87,
  };
  // #endif
};

// #ifdef MP
const capsule = getCapsule();
// #endif
const device = uni.getSystemInfoSync();
// 标题栏高度
const getNavBar = () => {
  return device.statusBarHeight + 44;
};
const navbar = getNavBar();

const bgOpacity = computed(() => {
  return {
    backgroundColor: `rgba(255,255,255, ${opacityVal.value})`,
  };
});
const customNavStyle = computed(() => {
  return {
    top: navbar * 2 + "rpx",
    navHeight: navHeight,
    menuButtonTop: menuButtonInfo.top,
    menuButtonHeight: menuButtonInfo.height,
  };
});

const systemInfo = uni.getSystemInfoSync();
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

// 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下边距）
const navHeight =
  menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;

const handleBack = () => {
  if (pagesLen.value == 1) {
    uni.reLaunch({
      url: "/pages/index/index",
    });
    return;
  }
  uni.navigateBack({
    delta: 1,
  });
};

const pagesLen = computed(() => {
  return uni.$u.pages().length;
});
</script>

<style lang="scss" scoped>
.custom-nav {
  position: relative;
  width: 100%;
}

.menu-button {
  position: absolute;
  left: 0;
  padding: 0 10rpx;
}
</style>
